﻿<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人年度计划管理</title>
    <jsp:include page="/resources/inc/head.jsp" />
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/demo.css" rel="stylesheet"/>
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/metroStyle/metroStyle.css" rel="stylesheet"/>
</head>
<body>
<div id="main">
    <div class="search-parent">
        <div class="search-child">
            <label for="beginDate-div">开始时间:</label>
            <div class="search custom-search" id="beginDate-div" style="width:150px;">
                <input class="form-control date-select" id="beginDate" type="text"
                       readonly="readonly" placeholder="请选择开始时间">
            </div>
            <label for="endDate-div">结束时间:</label>
            <div class="search custom-search" id="endDate-div" style="width:150px;">
                <input class="form-control date-select" id="endDate" type="text"
                       readonly="readonly" placeholder="请选择结束时间">
            </div>
        </div>
        <div class="search-child">
            <label for="organzation-div">请选择部门</label>
            <div class="search custom-search" id="organzation-div" style="width: 200px;">
                <input type="text" readonly="readonly" id="organization" ztreeId="organizationTree"
                       placeholder="请选择部门" class="layui-input" onclick="ZtreeCommon.showMenu(this)">
                <input type="hidden" id="organizationId" ztreeId="organizationTree">
            </div>
            <div class="menuContent" style="display:none; position: absolute;z-index: 10000">
                <ul id="organizationTree" class="ztree" style="margin-top:0; width:220px;"></ul>
            </div>
        </div>
        <div class="search-child">
            <label for="personal-div">请选择员工</label>
            <div class="search custom-search" id="personal-div" style="width: 200px;">
                <input type="text" readonly="readonly" id="user" ztreeId="userTree"
                       placeholder="请选择员工" class="layui-input" onclick="ZtreeCommon.showMenu(this)">
                <input type="hidden" id="userId" ztreeId="userTree">
            </div>
            <div class="menuContent" style="display:none; position: absolute;z-index: 10000">
                <ul id="userTree" class="ztree" style="margin-top:0; width:220px;"></ul>
            </div>
        </div>
        <div class="btn btn-default" type="button" title="搜索" onclick="doSearch()">搜索</div>
        <div class="btn btn-default" type="button" title="重置" onclick="cleanSearch()">重置</div>
    </div>
    <div id="toolbar">
        <shiro:hasPermission name="oa:wc:personalYearPlan:create">
            <a class="waves-effect waves-button" href="javascript:;"
               onclick="insertPlan()">
                <i class="zmdi zmdi-plus"></i>新增计划
            </a>
        </shiro:hasPermission>
        <shiro:hasPermission name="oa:wc:personalYearPlan:delete">
            <a class="waves-effect waves-button" href="javascript:;"
               onclick="Common.batchDelete({url:'${basePath}/oa/wc/personalYearPlan/delete'})">
                <i class="zmdi zmdi-close"></i>删除计划
            </a>
        </shiro:hasPermission>
        <shiro:hasPermission name="oa:wc:personalYearPlan:import">
            <a class="waves-effect waves-button" href="javascript:;" onclick="importPlan()">
                <i class="zmdi zmdi-upload"></i>导入计划
            </a>
        </shiro:hasPermission>
        <shiro:hasPermission name="oa:wc:personalYearPlan:export">
            <a class="waves-effect waves-button" href="javascript:;" onclick="exportPlan()">
                <i class="zmdi zmdi-download"></i>导出计划
            </a>
        </shiro:hasPermission>
    </div>
    <table id="table"></table>
</div>
<jsp:include page="/resources/inc/footer.jsp" />
<script src="${basePath}/resources/zheng-admin/js/my-ztree-common.js"></script>
<script src="${basePath}/resources/zheng-admin/plugins/zTree_v3/js/jquery.ztree.exhide.min.js"></script>
<script src="${basePath}/resources/zheng-admin/plugins/zTree_v3/js/fuzzysearch.js"></script>
<script>
    var organizationNodes = getOrganizationTree(true, false);
    var userNodes = getOrganizationTree(false, true);
    $(userNodes).each(function (index, node) {
        if (!node.isUser) {
            node.nocheck = true;
        }
    });
    var $table = $('#table');
    $(function () {
        // bootstrap table初始化
        $table.bootstrapTable({
            url: '${basePath}/oa/wc/personalYearPlan/list',
            height: getHeight(),
            striped: true,//隔行变色
            search: false,
            showRefresh: true,
            showColumns: true,//是否显示 内容列下拉框
            minimumCountColumns: 2,//当列数小于此值时，将隐藏内容列下拉框
            clickToSelect: true,//设置true 将在点击行时，自动选择rediobox 和 checkbox
            detailView: true,//设置为 true 可以显示详细页面模式。
            detailFormatter: 'detailFormatter',//格式化详细页面模式的视图。
            pagination: true,//设置为 true 会在表格底部显示分页条
            paginationLoop: false,//设置为 true 启用分页条无限循环的功能。
            sidePagination: 'server',
            silentSort: false,//设置为 false 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效.
            smartDisplay: false,//True to display pagination or card view smartly.
            queryParamsType: "",
            escape: true,//转义HTML字符串，替换 &, <, >, ", `, 和 ' 字符.
            searchOnEnterKey: true,//设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
            idField: 'id',//指定主键列
            maintainSelected: true,//设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
            toolbar: '#toolbar',
            queryParams: function (params) {
                var beginDate = $("#beginDate").val();
                var endDate = $("#endDate").val();
                if (new Date(beginDate) < new Date(endDate)) {
                    params.beginDate = beginDate;
                    params.endDate = endDate;
                }
                params.corganization = $("#organizationId").val();
                params.cuser = $("#userId").val();
                return params;
            },
            columns: [
                {field: 'ck', checkbox: true},
                {field: 'planName', title: '计划标题', align: 'center'},
                {field: 'readCount', title: '阅读次数', align: 'center', sortable: true},
                {field: 'planYear', title: '计划年份', align: 'center', sortable: true},
                {field: 'username', title: '计划人姓名', align: 'center'},
                {field: 'organizationName', title: '部门名称', align: 'center'},
                {field: 'ctime', title: '创建时间', align: 'center', formatter: 'timeFormatter', sortable: true},
                {
                    field: 'action',
                    title: '操作',
                    align: 'center',
                    formatter: 'actionFormatter',
                    events: 'actionEvents',
                    clickToSelect: false
                }
            ]
        });
        layui.use('laydate', function () {
            laydate = layui.laydate;
            $(".date-select").each(function (index, input) {
                laydate.render({
                    elem: this //指定元素
                    , theme: '#393D49'
                    , type: 'year'
                });
            });
        });
        var organizationTree = $.fn.zTree.init($("#organizationTree"), ZtreeCommon.radioAllSetting, organizationNodes);
        var userTree = $.fn.zTree.init($("#userTree"), ZtreeCommon.radioSetting, userNodes);
        $("#userTree").prepend('<input type="text" id="searchUser" placeholder="请输入搜索员工姓名" class="ztree-search">');
        fuzzySearch('userTree','#searchUser',false,true);
    });
    var updateData = {
        title: "编辑计划",
        url: "${basePath}/oa/wc/personalYearPlan/update"
    };
    var viewData = {
        title: "浏览计划",
        url: "${basePath}/oa/wc/personalYearPlan/view",
        icon: "file"
    };
    var deleteData = {
        url: "${basePath}/oa/wc/personalYearPlan/delete"
    };
    function actionFormatter(value, row, index) {
        var html = "";
        var param = Common.getParam({id: row.id});
        updateData.param = param;
        viewData.param = param;
        deleteData.id = row.id;
        <shiro:hasPermission name="oa:wc:personalYearPlan:read">
        html += getPageHtml(viewData) + "  ";
        </shiro:hasPermission>
        <shiro:hasPermission name="oa:wc:personalYearPlan:update">
        html += getPageHtml(updateData) + "  ";
        </shiro:hasPermission>
        <shiro:hasPermission name="oa:wc:personalYearPlan:delete">
        html += getDeleteHtml(deleteData) + "  ";
        </shiro:hasPermission>
        return html;
    }
    function doSearch() {
        var beginDate = $("#beginDate").val();
        var endDate = $("#endDate").val();
        var organizationId = $("#organizationId").val();
        var cuser = $("#userId").val();
        if(new Date(beginDate) >= new Date(endDate)){
            layer.msg('开始日期必须早于结束日期！', {icon: 5});
            return;
        }
        var opt = {
            url: "${basePath}/oa/wc/personalYearPlan/list",
            silent: true,
            query: {
                beginDate: beginDate,
                endDate: endDate,
                corganization: organizationId,
                cuser: cuser
            }
        };
        $table.bootstrapTable("refresh", opt);
    }
    function cleanSearch() {
        $("#beginDate").val("");
        $("#endDate").val("");
        $("#organizationId").val("");
        $("#userId").val("");
        $("#organization").val("");
        $("#user").val("");
        $table.bootstrapTable("refresh");
    }
    function insertPlan() {
        Common.openPage({
            title: '新增个人年度计划',
            url: '${basePath}/oa/wc/personalYearPlan/create',
        })
    }
    function exportPlan() {
        var beginDate = $("#beginDate").val();
        var endDate = $("#endDate").val();
        if(new Date(beginDate) >= new Date(endDate)){
            layer.msg('开始日期必须早于结束日期！', {icon: 5});
            return;
        }
        var organizationId = $("#organizationId").val();
        var cuser = $("#userId").val();
        window.location.href = "${basePath}/oa/wc/personalYearPlan/export?beginDate=" + beginDate + "&endDate=" + endDate + "&cuser=" + cuser + "&corganization=" + organizationId;
    }
    function importPlan() {
        Common.openPage({
            title: "导入年计划",//page标题
            url: "${basePath}/oa/wc/personalYearPlan/import",
            isFull: false,//是否全屏
            isMaxMin: false,//是否支持最大最小化
            width: "500px",//初始宽度
            length: "35%"//初始高度
        });

    }
</script>
</body>
</html>